<div class="layui-card-header layui-card">
    <span class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">首页</a>
        <a><cite>消息列表</cite></a>
    </span>
</div>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">消息列表信息</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-row">
                    <div class="layui-form" style="float:right;">
                        <div class="layui-form-item" style="margin:0;">
                            <label class="layui-form-label">消息名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="title" id="title" placeholder="消息名称" autocomplete="off" class="layui-input">
                            </div>
                            <button id="search" class="layui-btn" data-type="reload">
                                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="layui-card-body">
                    <div style="padding-bottom: 10px;">
                        <button class="layui-btn layuiadmin-btn-list" data-type="add">新建</button>
                        <button class="layui-btn dele" data-type="all" data-events="del">删除</button>
                    </div>
                </div>
                <table id="mesList" lay-filter="mesList"></table>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="payBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>


    layui.use(['table','util','admin', 'form','layedit'], function(){
        var table = layui.table
        ,$ = layui.$
        ,form = layui.form
        ,admin = layui.admin,
        view =layui.view,
            layedit=layui.layedit
            ,layer =layui.layer
        ,element = layui.element;

        element.render('breadcrumb', 'breadcrumb');//渲染导航信息

        var tplState = function(d){
            if(d.state == 0) {
                return "<span class='layui-btn layui-btn-xs layui-btn-disabled'>停止</span>";

            }
            return "<span class='layui-btn layui-btn-xs'>启用</span>";
        };


        table.render({
            elem: '#mesList'
            ,url: layui.setter.baseUrl + '/sys/message/list'
            ,where: {
                access_token: layui.data(layui.setter.tableName).access_token
            }
            ,id: 'tableReload'
            ,cols: [[
            {type: 'checkbox', fixed: 'left'}
                ,{field: 'title',title: '消息名称'}
                ,{field: 'state',title: '状态',templet: tplState}
                ,{field:'createTime',  title: '创建时间', templet: '<div>{{ layui.util.toDateString(d.createTime) }}</div>' }
                ,{field:'edite', title: '操作', toolbar: '#payBar'  }
            ]]
            ,page: true
            ,skin: 'line'
        });

         //监听工具条
         table.on('tool(mesList)', function(obj){
            var data = obj.data;
            console.log(data)
            if(obj.event === 'detail'){
                var id =data.id;
                admin.req({
                    type: 'get',
                    url: layui.setter.baseUrl + '/sys/message/get',
                    data: {
                        id: id
                    },
                    success: function(res){
                        if(res.code == 0){

                            data =res.data;
                            admin.popup({
                                title: '消息详情'
                                , area: ['410px', '590px']
                                , id: 'LAY-popup-content-detail'
                                , success: function (layero, index) {
                                    view(this.id).render('sys/message/detail').done(function () {
                                        form.render(null, 'layuiadmin-app-form-list');

                                        var body =layer.getChildFrame('body',index);
                                        body.find('#email').val(data.email);
                                        form.val("layuiadmin-app-form-list",{
                                            "id":res.data.id,
                                            "title":data.title
                                        })
                                        $('#state').val(data.state == 0?'隐藏':'显示');
                                        $('#createUserId').val(data.createUserId);
                                        $('#createTime').val( layui.util.toDateString(data.createTime));
                                        $('#updateTime').val( layui.util.toDateString(data.updateTime));
                                        $('#message').html(res.data.message);
                                    });
                                }
                            });
                        }else {
                            layer.alert(res.msg,{
                                title: '请求成功，但是状态不对'
                            })
                        }
                    }
                })




            } else if(obj.event === 'del'){
                layer.confirm('确认删除么', function(index){
                    admin.req({
                        url:layui.setter.baseUrl + '/sys/message/delete',
                        data:{ids: data.id},
                        success: function(){
                            layer.msg('删除成功', {
                                icon: 1
                            });
                            table.reload("tableReload");
                        }
                    });
                });
            } else if(obj.event === 'edit'){

                var  id =data.id;
                admin.req({
                    type: 'get',
                    url: layui.setter.baseUrl + '/sys/message/get',
                    data: {
                        id: id
                    },
                    success: function(res){
                        if(res.code == 0){

                         data=res.data;
                            admin.popup({
                                title: '消息编辑'
                                , area: ['690px', '600px']
                                , id: 'LAY-popup-content-edit'
                                , success: function (layero, index) {
                                    view(this.id).render('sys/message/update').done(function () {
                                        form.render(null, 'layuiadmin-app-form-list');


                                        var body =layer.getChildFrame('body',index);
                                        body.find('#email').val(data.email);
                                        form.val("layuiadmin-app-form-list", {
                                            "id":data.id,
                                            "title":data.title

                                        })

                                        if(res.data.state == 1) {
                                            $("input[name='state'][value='1']").attr("checked", true);
                                        }else {
                                            $("input[name='state'][value='0']").attr("checked", true);
                                        }
                                        $('#mesContent').val(data.message);

                                        form.render();
                                        var index;
                                        index = layedit.build('mesContent'); //建立编辑器
                                        form.on('submit(upBtn)', function(data){
                                            // console.log(layedit.getContent(index));
                                            admin.req({
                                                type: 'POST',
                                                url: layui.setter.baseUrl + '/sys/message/update',
                                                data: {
                                                    id: data.field.id,
                                                    title: data.field.title,
                                                    state:data.field.state,
                                                    message: layedit.getContent(index),
                                                },
                                                success: function(res){
                                                    if(res.code == 0){
                                                       /* layer.alert(res.msg,{title: "保存成功"},function(index){
                                                            table.reload('tableReload');
                                                            layer.closeAll();
                                                        })*/
                                                        layer.msg('保存成功', {
                                                            offset: '15px'
                                                            ,icon: 1
                                                            ,time: 1000
                                                        }, function(){
                                                            table.reload('tableReload');
                                                            layer.closeAll();
                                                        });
                                                    }else {
                                                       /* layer.alert(res.msg,{
                                                            title: '更新失败'
                                                        })*/
                                                        layer.msg('更新失败', {
                                                            offset: '15px'
                                                            ,icon: 1
                                                            ,time: 1000
                                                        });
                                                    }
                                                }
                                            });
                                            return false;
                                        })
                                    });
                                }
                            });

                        }else {
                            layer.alert(res.msg,{
                                title: '请求成功，但是状态不对'
                            })
                        }
                    }
                })

            }
        });

        // 事件处理
        var events = {
            del: function(othis, type){
                var checkStatus = table.checkStatus("tableReload")
                ,data = checkStatus.data; // 获得选中的数据
                if (data.length === 0) return layer.msg('请选择数据');
                layer.confirm('确定删除选中的数据吗？', function(){
                    var ids = "";
                    $.each(data, function(i, n){
                        ids = ids + "," + n.id;
                    });
                    console.log("ids");
                    if(ids != "") {
                        ids = ids.substring(1);
                    }
                    admin.req({
                        url: layui.setter.baseUrl + '/sys/message/delete',
                        data: {ids: ids},
                        success: function(){
                            layer.msg('删除成功', {
                                icon: 1
                            });
                            table.reload("tableReload"); // 刷新表格
                        }
                    });
                });
            }
        };
         // 搜索
        var $ = layui.$, active = {
            reload: function(){
                var title = $('#title').val();
                //执行重载
                table.reload('tableReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        title: title
                    }
                });
            }

            ,add: function (othis) {
                admin.popup({
                    title: '新建消息'
                    , area: ['690px', '560px']
                    , id: 'LAY-popup-content-add'
                    , success: function (layero, index) {
                        view(this.id).render('sys/message/create').done(function () {

                            form.render(null, 'layuiadmin-app-form-list');
                            var index =layedit.build('mesContent');

                            //监听提交
                            form.on('submit(saveBtn)',function(data){

                                admin.req({
                                    type: 'POST',
                                    url: layui.setter.baseUrl + '/sys/message/add',
                                    data: {
                                        title: data.field.title,
                                        message: layedit.getContent(index),
                                    },
                                    success: function(res){
                                        if(res.code == 0){
                                            /*layer.alert(res.msg,{title: "保存成功"},function(index){
                                                table.reload('tableReload');
                                                layer.closeAll();
                                            })*/
                                            layer.msg('保存成功', {
                                                offset: '15px'
                                                ,icon: 1
                                                ,time: 1000
                                            }, function(){
                                                table.reload('tableReload');
                                                layer.closeAll();
                                            });
                                        }else {
                                            /*layer.alert(res.msg,{
                                                title: '请求成功，但是状态不对'
                                            })*/
                                            layer.msg('保存成功', {
                                                offset: '15px'
                                                ,icon: 1
                                                ,time: 1000
                                            });
                                        }
                                    }
                                });
                                return false;
                            });

                        });
                    }
                });
            }


        };
        $('#search').on('click', function() {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        $('.layui-btn.layuiadmin-btn-list').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        $('.dele').on('click', function(){
            var othis = $(this)
                    ,thisEvent = othis.data('events')
                    ,type = othis.data('type');
            events[thisEvent] && events[thisEvent].call(this, othis, type);
        });
        // 渲染表单
        form.render();


    })
</script>
